<template>
  <v-chart
    :theme="theme"
    :loading="loading"
    :loadingOptions="loadingOptions"
    :initOptions="initOptions"
    :options="config"
    v-on="$listeners"
    ref="radar"
  />
</template>
<script>
import VChart from '../../Core'

export default {
  name: 'RadarChart',
  components: {
    VChart,
  },
  props: {
    showTitle: {
      type: Boolean,
      default: false,
    },
    loadingOptions: Object, // loading 状态配置项
    loading: {
      type: Boolean,
      default: false,
    },
    initOptions: Object,
    options: {
      type: Object,
      default: function() {
        return {}
      },
    },
    theme: {
      type: [String, Object],
      default: 'xm',
    },
  },

  computed: {
    config() {
      const { title, legend, tooltip, series, ...otherConfig } = this.options

      const option = {
        title,
        tooltip: {
          ...tooltip,
        },
        legend: {
          ...legend,
        },

        series: (series || []).map(item => ({
          type: 'radar',
          ...item,
        })),
        ...otherConfig,
      }

      return option
    },
  },

  methods: {
    getEchartsInstance() {
      return this.$refs.radar.chart
    },
  },
}
</script>
